<template>
  <div class="report">
    <div ref="charts" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import * as echarts from 'echarts'

import { getreportdata } from '@/server/report'
export default defineComponent({
  setup() {
    const options1 = ref({})
    const options = {
      title: {
        text: '用户来源'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#E9EEF3'
          }
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          boundaryGap: false
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ]
    }
    const charts = ref<HTMLElement>()
    getreportdata().then((res) => {
      options1.value = res.data
    })
    onMounted(() => {
      // 推荐使用async await
      const myChart = echarts.init(charts.value!)
      setTimeout(() => {
        myChart.setOption({ ...options, ...options1.value })
      }, 1000)
    })
    return {
      charts
    }
  }
})
</script>

<style lang="scss" scoped></style>
